/**
* 关于优惠券
*/

<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-red" :isBack="true" v-show="!type">
			<block slot="backText" @click="back">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<view class="closeBox" v-show="type">
			<text class="text-grey cuIcon-close closeImg" @click="clickClose"></text>
		</view>
		<Loading class="loading1" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<view class="topBox">
			<view class="lingH">

			</view>
			<view class="lineTitle">
				可用优惠券 <text style="color: red;"> {{count}}</text> 个
			</view>

		</view>
		<scroll-view scroll-y class="courseBox">
			<view class="order-box animation-slide-bottom" v-for="(item,index) in list"
				:style="[{animationDelay: (1 + 1)*0.1 + 's'}]">
				<view class="shadow color1">
					<view class="shadowTop">
						<text class="titleStyle">￥</text>
						<text class="jine">{{item.price}}</text>
						<text class="titleStyle">{{item.title}}</text>
					</view>
					<view class="shadowButtom">有效期:{{item.create_time}}-{{item.end_time}}</view>
				</view>
				<view class="shadow-right">

					<text class="shadow-right-title color3" @click="useConpon(index)"
						v-if="conponIndex!=index">立即使用</text>
					<text class="shadow-right-title color3" @click="cancelConpon(index)"
						v-if="conponIndex==index">取消</text>
				</view>

			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "Coupon",
		props: [
			'type', 'conponId'
		],
		data() {
			return {
				title: '我的优惠券',
				boxH: this.bodtyH - this.CustomBar - 100,
				loadStatus: 'load',
				isLoading: false,
				conponIndex: -1,
				count: 0, //优惠券的数量
				list: [], //存储优惠券的列表
				tiemr: {},

			}

		},
		onShareAppMessage(res) {
			console.log("分享的openid " + this.initCode);
			return {
				title: "乐知课程艺术中心",
				path: '/pages/index/index?userCode=' + this.initCode
			}

		},
		mounted() {
			let dat = {
				action: "getDiscountList",
				openId: this.Reques.sessionData.data.openId
			}
			this.loadData(dat);
			console.log("conponId ： " + this.conponId);
			

		},
		methods: {
			back() {
				console.log("返回");
				// clearInterval(this.timer);

			},
			/**
			 * 选择优惠券
			 */
			selectId() {
				for (let i in this.list) {
					console.log("循环 "+i);
					if (this.list[i].id == this.conponId) {
						this.conponIndex = i;
						break;
					}
				}


			},

			/**
			 * 关闭优惠券
			 */
			clickClose() {
				console.log(this.list[this.conponIndex]);
				console.log("关闭界面");
				this.$emit("selectConpon", this.list[this.conponIndex]);

			},
	
             /*
			 * 取消优惠券
			 * @param {Object} index
			 */
			cancelConpon(index) {
				// clearInterval(this.timer);
				if (this.type && this.conponIndex == index) {
					this.conponIndex = -1;
				}
			},

			/**
			 * 使用优惠券
			 */
			useConpon(index) {

				if (this.type) {
					this.conponIndex = index;
				} else {
					uni.reLaunch({
						 	url: '/pages/index/index',
						 	animationType: 'slide-in-left'
					})
				}


			},


			/**clear
			 * @param {Object} data
			 */
			clear() {
				console.log("清空");
			},
			/**
			 * 加载优惠券的数据列表
			 * @param {Object} data
			 */
			loadData(data) {
				this.Reques.commonQuest("xcx/discount.api.php", "POST", data).then((res) => {
					console.log(res);
					if (res.statusCode == 200 && res.data.code == 0) {
						this.isLoading = true;
						this.list = res.data.discountList;

						for (let i in this.list) {
							this.list[i].create_time = this.Reques.to_date(this.list[i].start_time, 1);
							this.list[i].end_time = this.Reques.to_date(this.list[i].end_time, 1);
							this.count = parseInt(i) + 1;
						}
						((this.conponId != "") ? (this.selectId()) : "");
						
					} else {
						this.loadStatus = 'error2';
					}
				}, (err) => {
					this.loadStatus = 'error2';
					console.log(err);
				});

			}



		}



	}
</script>

<style scoped>
	.topBox {
		width: 94vw;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 3vw;
		margin-top: 5vh;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.lingH {
		width: 10rpx;
		background-color: red;
		height: 100%;
	}

	.lineTitle {
		font-size: 4vw;
		margin-left: 2vw;
	}

	.order-box {
		margin-top: 2vh;
		width: 94vw;
		margin-left: 3vw;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		border: 1px solid #DBDBDB;
	}

	.shadow {
		width: 70%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.color1 {
		color: white;
		background-image: linear-gradient(135deg, #F14086, #FF9E29);
	}

	.color2 {
		color: #9C9C9C;
		background-color: #DADADA;
	}

	.shadowTop {
		height: 60%;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		width: 90%;

	}

	.shadowButtom {
		text-align: center;
		height: 20%;
		width: 90%;
		margin-top: 2%;
		font-size: 3.5vw;

	}

	.jine {
		padding: 0 15rpx 0 15rpx;
		font-size: 10vw;
		font-weight: 300;

	}

	.titleStyle {
		font-size: 5vw;
		align-items: flex-end;

	}

	.shadow-right {
		width: 30%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shadow-right-title {
		font-size: 4.2vw;

	}

	.closeBox {
		height: 3vw;

		position: relative;

	}

	.closeImg {
		font-size: 7vw;
		position: absolute;
		float: right;
		right: 2vw;
		top: 2vw;
	}
</style>
